<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge">
    <meta name=viewport content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1">
    <title>一道简单的试题</title>
    <link rel="stylesheet" href="static/codemirror/codemirror.css">
    <link rel="stylesheet" href="static/codemirror/theme/monokai.css">
    <link href="static/json-viewer/jquery.json-viewer.css" type="text/css" rel="stylesheet">
    <script src="static/jquery/jquery-3.3.1.min.js"></script>
    <script src="static/json-viewer/jquery.json-viewer.js"></script>
    <script src="static/codemirror/codemirror.js"></script>
    <script src="static/codemirror/mode/javascript/javascript.js"></script>
    <script src="static/socketio/socket.io.min.js"></script>
    <style>
        #step1{
            width: 80%;
            margin: 0 auto;
            text-align: center;
        }
        .decoration-bar{
            height: 5px;
            margin: -8px;
            background-image: linear-gradient(
                    139deg,
                    #85c9ff,
                    #2670af,
                    #017fe4,
                    #4badff);
        }
        .bsl-logo{
            width: 200px;
            margin-top: 50px;
        }
        .form-field{
            margin-top: 50px;
            border-bottom: 2px solid #d7e3ef;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .form-field.active{
            border-color: #017fe4;
        }
        .form-field .label{

        }
        .form-field .input{
            border: 0;
            outline: 0;
            flex: 1;
            font-size: 14px;
            padding: 12px 10px 10px 10px;
        }
        .form-field .btn{
            background-color: #017fe4;
            display: block;
            width: 30px;
            height: 30px;
            line-height: 35px;
            text-align: center;
            border-radius: 50%;
        }
        .form-field .btn:active{
            background-color: #359ff5;
        }
        .btn-save{
            margin-top: 10px;
            background-color: #017fe4;
            color: #ffffff;
            border: 0;
            outline: 0;
            padding: 12px 0;
            font-size: 14px;
            width: 100%;
            cursor: pointer;
            border-radius: 4px;
            margin-bottom: 20px;
        }
        .btn-save:active{
            background-color: #359ff5;
        }
    </style>
</head>

<body>
<div class="decoration-bar"></div>

<div id="step1" style="display: none">
    <img class="bsl-logo" src="static/images/logo.png" alt="logo">
    <div class="form-field">
        <label class="label">姓名:</label>
        <input id="txt_username" class="input" autocomplete="off" placeholder="请输入您的姓名"/>
        <a class="btn" onclick="nameConfirm()">
            <svg viewBox="0 0 1257 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="18" height="18"><path d="M745.47264 1024c11.264 0 23.552-4.096 31.744-13.312L1244.16064 543.744a45.12 45.12 0 0 0 0-63.488L777.21664 13.312a45.12 45.12 0 0 0-63.488 0c-18.432 17.408-18.432 46.08 0 64.512L1147.90464 512 713.72864 946.176c-18.432 18.432-18.432 47.104 0 64.512 8.192 9.216 20.48 13.312 31.744 13.312zM45.05664 557.056h1102.848A45.44 45.44 0 0 0 1192.96064 512a44.8 44.8 0 0 0-45.056-45.056H45.05664A44.8 44.8 0 0 0 0.00064 512c0 24.576 20.48 45.056 45.056 45.056z" fill="#ffffff"></path></svg>
        </a>

    </div>
</div>

<div id="step2" style="display: none">



    <p>现有JSON数据，格式如下</p>

    <pre id="json-renderer"></pre>

    <div>
        <p>请写一个方法将数据所有billOpened ，true变成false，false变成true</p>
        <p>并添加属性（nodeCodes）值为其所有父元素的nodeCode用“-”拼接</p>
    </div>

    <textarea id="codeArea"></textarea>

    <button id="btn_save" class="btn-save">保存</button>
</div>



<script>

    $('#json-renderer').jsonViewer([{
        nodeCode: "59",
        nodeName: "国际小学",
        children: [
            {
                nodeCode: "37",
                nodeName: "PYP小学",
                children: [
                    {
                        nodeCode: "99",
                        nodeName: "二年级",
                        children: null,
                        billOpened: null
                    },
                    {
                        nodeCode: "100",
                        nodeName: "三年级",
                        children: null,
                        billOpened: true
                    },
                    {
                        nodeCode: "101",
                        nodeName: "四年级",
                        children: null,
                        billOpened: true
                    },
                    {
                        nodeCode: "102",
                        nodeName: "五年级",
                        children: [
                            {
                                nodeCode: "1011",
                                nodeName: "一班",
                                children: null,
                                billOpened: true
                            }
                        ],
                        billOpened: true
                    }
                ],
                billOpened: true
            }
        ],
        billOpened: true
    }]);

    var timer = setTimeout(function (){})

    var socket = io(location.origin);

    var username = localStorage.getItem('userName');


    if(username){
        nameConfirm(username)
    }else{
        let formField = $(".form-field");

        $("#step1").removeAttr("style");
        $("#txt_username").on('keydown',function(event){
            if(Number(event.keyCode) === 13) {
                nameConfirm()
            }
        }).on("focus",function (){
            formField.addClass('active')
        }).on("blur",function (){
            formField.removeClass('active')
        })
    }


    function nameConfirm(hasName){

        if(!hasName){
            let name = $("#txt_username").val().trim();

            if(!isEmpty(name)){
                localStorage.setItem('userName',name);
                username = name;
            }
            else {
                alert("请输入您的姓名");
                return;
            }
        }else{
            username = hasName;
        }

        socket.emit("connected",username);


        $("#step1").css("display","none");
        $("#step2").removeAttr("style");

        var editor = CodeMirror.fromTextArea(document.getElementById("codeArea"), {
            lineNumbers: true,
            mode: "javascript",
            autoCloseBrackets: true,
            matchBrackets: true,
            showCursorWhenSelecting: true,
            theme: "monokai",
        });

        editor.on("change",function(){
            clearTimeout(timer);
            timer = setTimeout(function (){

                socket.send({
                    type: "change",
                    name: username,
                    msg: editor.getValue()
                });

            },250)

        });



        var code = localStorage.getItem('codeInMemory');

        if(code){
            editor.setValue(code);
        }

        socket.on("sendCode",function (data){

            if(username === data.name){
                socket.send({
                    type: "send",
                    name: username,
                    msg: editor.getValue()
                })
            }

        })


        $("#btn_save").on("click",function (){

            clearTimeout(timer);

            timer = setTimeout(function (){
                localStorage.setItem('codeInMemory',editor.getValue());
                socket.send({
                    type: "save",
                    name: username,
                    msg: editor.getValue()
                })
            },250)

        })
    }

    function isEmpty(t){
        return !t || (t = t.toString(),
            t = t.replace(/\ +/g, ""),
            t = t.replace(/[ ]/g, ""),
        (t = t.replace(/[\r\n]/g, "")) === "")
    }



</script>
</body>
</html>